<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="详情页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 店铺头部 -->
    <div class="shop-header" :style="{backgroundImage:'url('+(shopinfo.info && shopinfo.info.picUrl)+ ')'}">
      <div class="left">
        <img :src="shopinfo.info && shopinfo.info.picUrl" alt="">
        <span>{{shopinfo.info && shopinfo.info.name}}</span>
      </div>
      <!-- 取消收藏按钮 -->
      <!-- <div class="right" v-if="isCollect" @click="$store.commit('cancel_collect',shopinfo.info)" style="color:red">❤</div> -->
      <div class="right" v-if="isCollect" @click="cancel_collect(shopinfo.info)" style="color:red">❤</div>
      <!-- 收藏按钮 -->
      <!-- <div class="right" v-else @click="collect(shopinfo.info)">❤</div> -->
      <div class="right" v-else @click=" request_fav(shopinfo.info)" style="color:black">❤</div>
    </div>
    <!-- 店铺内的商品分类和列表 -->
    <div class="box">
      <div class="left">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item  v-for="(item,index) in shopinfo.taglist" :key="index" :title="item.name" />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
          <div class="imgbox">
            <img :src="item.picture" alt="">
          </div>
          <div class="text">
            <div class="up">
              <div class="name">{{item.name || item.shopName}}</div>
              <div class="desc">{{item.month_saled_content}}</div>
            </div>
            <div class="down">
              <div class="price">¥{{item.min_price}}</div>
              <div class="opes">
                <span class="sub" v-show="isInShopcart(item)" @click="request_shopcart_sub(item)">-</span>
                <span class="sum" v-show="isInShopcart(item)">{{ isInShopcartCount(item) }}</span>
                <span class="add" @click="request_shopcart_add(item)">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shopcar">
      <img src="../assets/pic.png" alt="" @click="changeClick()">
      <span class="shopsum">总计：￥{{totalPrice}}</span>
      <button @click="changeClick()">去结算</button>
    </div>
    <div class="shopcart" v-show="status == true">
    <div class="banner" @click="changeClick()"></div>
    <div class="nav">
        <div class="font">
            <h4>已选商品</h4>
            <van-icon name="delete-o" class="icon" @click="request_clear"/><span @click="request_clear">清空</span>
        </div>
        <ul v-if="shopcartlist.length != 0" class="list">
            <li v-for="(item,index) in shopcartlist" :key="index" class="good">
                <div class="imgbox">
                  <img :src="item.picture" alt="">
                </div>

                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="price">￥{{item.min_price}}</div>
                        <span class="sub" @click="sub(item)">-</span>
                        <span class="sum">{{item.count}}</span>
                        <span class="add" @click="add(item)">+</span>
                </div>
            </li>
        </ul>
        <div class="empty" v-else>购物车空空如也</div>
    </div>
  </div>
  </div>
</template>

<script>
import {  mapState,mapMutations,mapActions } from "vuex";
import {Dialog} from 'vant';
import { shop_shopinfo } from '../utils/api';

export default {
  //导入vuex中的工具函数（辅助函数）,使用该工具函数，简化vuex在组件中的应用
  data(){
    return{
      currentIndex:0,
      shopinfo:{},
      status:false
    }
  },
  computed:{
    //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中
    ...mapState(['collectlist','shopcartlist']),
   
     //mapGetters()这个工具函数 会将vuex中的计算方法 映射到组件的computed中.
    //  ...mapGetters([]),
     isCollect(){//当前店铺是否已收藏(true表示已收藏 false表示未收藏)
      //拿到 当前店铺对象，还要同时拿到收藏列表，然后做判断，返回判断结果
      var index = this.collectlist.findIndex((item)=>{
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
        
      })
      return index != -1
     },
     totalPrice: {
            get(){ //get方法会在 使用(渲染)计算属性时自动执行
                var sum = 0;
                this.shopcartlist.forEach((item)=>{
                    sum += item.count * item.min_price;
                })
                return Math.round(sum*100)/100;
            },
            set(){ //set方法会在 给计算属性设置值时执行
                console.log( '给totalPrice设置值' );
            }
        }
    
  },
  methods:{
    //mapMutations()这个工具函数 会将vuex中的同步方法 映射到组件的methods中.
    ...mapMutations(['collect','cancel_collect','shopcart_add']),
    //mapActions()这个工具函数 会将vuex中的异步方法 映射到组件的methods中.
    ...mapActions(['request_fav','request_unfav','request_clear','request_shopcart_add','request_shopcart_sub']),
    changeClick(){
      this.status = !this.status;
      console.log(this.shopcartlist);

    },
    add(item){
        item.count++;
        },
    sub(item){
        if( item.count > 1 ){
          item.count--;
        }
        },
    clean(){
        this.request_clear();
        console.log('触发了删除');
        },
        isInShopcart(item){//当前商品是否
          //item是需要判断的商品对象
          var index = this.shopcartlist.findIndex((it=>{
            return it.id == item.id;
          }))
          return index !== -1

        },
        isInShopcartCount(item){
          var good = this.shopcartlist.find((it)=>{
            return it.id == item.id
          })
          if( good ){
            return good.count;
          }else{
            return 0;
          }
        }
  },
  mounted(){
    shop_shopinfo({id:this.$route.params.id}).then((res)=>{
      if(res.data.shopinfo){//店铺正常营业
        this.shopinfo = res.data.shopinfo;
        console.log(res.data);


      }
      else{//店铺倒闭
        Dialog.alert({
          title: '提示',
          message: '该店铺已倒闭!'
        }).then(()=>{
          this.$router.go(-1);
        })

      }
    })
  
  }
}
</script>

<style lang='scss' scoped>
.shop-header{
  display: flex;
  justify-content: space-between;
  padding: 50px 10px;
  background: rgba(0,0,0,0.3);
  background-size: 320px 122px;
  background-repeat: no-repeat;
  opacity: 0.6;
  
  
  
    .left{
    flex:1;
    display: flex;
    align-items: center;
    opacity: 1;
    img{
      width: 30px;
      margin-right: 10px;
      border-radius: 50%;
      opacity: 1;
    }
    span{
      color: #fff;
    }
  }
  .right{
    width: 20px;
    text-align: right;
  }
}
.box{
  display: flex;
  .left{
    width: 80px;
  }
  .right{
    flex:1;
    .good{
      display: flex;
      margin: 10px;
      .imgbox{
        width: 80px;
        margin-right: 10px;
        img{
          width: 100%;
          height: 90px;
        }
      }
      .text{
        flex:1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name{
          font-size: 16px;
          font-weight: bold;
        }
        .desc{
          margin-top:5px ;
          color: #ccc;
        }
        .down{
          display: flex;
          justify-content: space-between;
          .price{
            font-size: 16px;
            color: #ea4626;
            margin-top: 5px;
          }
          .sub{
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: skyblue;
            text-align: center;
            color: #fff;
            margin-right: 5px;
          }
          .add{
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: skyblue;
            text-align: center;
            color: #fff;
            margin-left: 5px;
          }
          .sum{
            font-size: 14px;
          }
        }
      }
    }
  }
}
.shopcar{
  width: 100%;
  height: 59px;
  background-color: #474747;
  position: fixed;
  bottom: 0;
  z-index: 999;
  margin-top: 60px;
  img{
    width: 60px;
    height: 60px;
    position: absolute;
    top: -14px;
  }
  button{
    position: absolute;
    right: 15px;
    top: 10px;
    width: 100px;
    height: 30px;
    background-color: #02d562;
    color: #fff;
    border: none;
    border-radius: 5px;

  }
}
.shopsum{
  display: inline-block;
  margin-top: 8px;
  margin-left: 60px;
  color:#fff;
}
.shopcart{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    // margin-bottom: 30px;
    .banner{
        height: 150px;
        background:rgba($color: #7f7f7f, $alpha: 0.3) ;       
    }
    .nav{
        height: 400px;
        background-color: #fff;
        margin-bottom: 90px;
        .font{
            width:100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            .icon{
                right: -90px;
                top: 25px;
                font-size: 18px;
            }
            span{
                position: relative;
                top: 21px;
                margin-right: 10px;
                
            }
        }
    }
}
.shopcart .list .good{
            display: flex;
            margin: 10px 0;
        }
        .shopcart .list .good .imgbox{
            width: 80px;
            margin-right: 10px;
        }
        .shopcart .list .good .imgbox img{
            width: 100%;
            height: 80px;
        }
        .shopcart .list .good .text{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
           
        }
        .shopcart .list .good .text .name{
            font-weight: bold;
        }
        .shopcart .text .price{
            display: flex;
            justify-content: space-between;
            
        }
        .shopcart .list .text .price span{
            display: inline-block;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            background-color: lightskyblue;
            color: white;
            border-radius: 50%;
            position: relative;
            
        }
       
        .shopcart .text .price span:nth-child(2){
            color: black;
            background-color: white;
        }
        .empty{
          text-align: center;
          margin: 40px 0;

        }
</style>